<template>
  <md-nav-bar title="" :bgInfo="{ url: data.cover,showLogo:false }" />
  <view class="square-header">
    <view class="square-tabs">
      <view class="tab active" @click="tabIndex = 0">热点动态</view>
    </view>
  </view>
  <view class="square-container">
    <md-page-list :api="api.News.list" :params="{ }" @change="pageChange" ref="pageRef">
      <view v-for="item in data?.list" :key="item?.id" class="news-card" @click="onToNewsDetail(item)">
        <view class="news-info">
          <view class="news-title">
            <text class="news-title-text">{{ item.title }}</text>
          </view>
          <view class="news-desc">
            <text class="news-desc-text">{{ item.createTime }}</text>
          </view>
        </view>
        <view class="news-cover" v-if="item.coverUrl">
          <image
              class="news-cover-image"
              :src="item.coverUrl"
              mode="aspectFill"></image>
        </view>
      </view>
    </md-page-list>
  </view>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";
import api from "@/api";

const data = reactive({
  cover: 'https://cdn.xmxiaomai.com/isong_static/evaluation/indexTopBg.png',
});

const pageRef = ref<any>(null);

const onToNewsDetail = (item: Music.List.ListVo) => {
  uni.navigateTo({
    url: `/pages/sub/news/detail?id=` + item.id,
  });
};

const pageChange = (list) => {
  data.list = list;
};



</script>
<style scoped lang="scss">
.square-header {
  margin-top: -230rpx;
  .square-tabs {
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    // margin-bottom: 32rpx;
  }
  .tab {
    font-size: 36rpx;
    color: #fff;
    font-weight: 600;
    margin-right: 48rpx;
    opacity: 0.7;
    position: relative;
    padding-bottom: 8rpx;
  }
  .tab.active {
    opacity: 1;
  }
  .tab.active::after {
    content: '';
    display: block;
    width: 37rpx;
    height: 13rpx;
    background-image: url('https://cdn.xmxiaomai.com/isong_static/common/Stroke%201.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    bottom: -10rpx;
    transform: translateX(-50%);
  }
}

.square-container {
  min-height: 100vh;
  padding-bottom: 120rpx;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  margin-top: 40rpx;
  position: relative;
  z-index: 999;
  background: linear-gradient(180deg, #dff2ee 0%, #f3f6f5 100%);
}

.news-card {
  padding: 32rpx 32rpx 0 32rpx;
  display: flex;
  gap: 24rpx;
  .news-info {
    flex: 1;
    .news-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }

    .news-desc {
      font-size: 24rpx;
      color: #999;
      margin-top: 20rpx;
    }
  }

  .news-cover {
    width: 200rpx;

    .news-cover-image {
      width: 200rpx;
      height: 160rpx;
      border-radius: 16rpx;
    }
  }

}
</style>